<template>
  <div id="comment">
    <div v-if="commentArr.length === 0" class="no-comment">
      这篇暂时没有评论,快来抢占！！！
    </div>
    <div class="comment" v-for="(t,num) in commentArr" :key="t.comment.objectId">
      <div class="head-img">
        <img
          :src="
            t.comment.userInfo.user_icon
              ? t.comment.userInfo.user_icon
              : 'https://thirdwx.qlogo.cn/mmopen/vi_32/qUZP3jnlVRbwicFW33M44CoP6FsOtK1zrdMokDlu8xzVv8fyyTY61K1icZKkPEc1PIicia82cRYoXWWmLJXUq64OHA/132'
          "
        />
      </div>
      <div class="comment-nav">
        <div class="comment-nav-title">
          <div>
            <p class="user-name">{{ t.comment.userInfo.name }}</p>
            <p class="comment-time">{{ t.comment.createdAt }}</p>
          </div>
          <span><van-icon name="ellipsis" /></span>
        </div>
        <div class="comment-text">
          <span class="comment-text-content">
            {{ t.comment.content }}
          </span>
          <div v-if="t.subComments.length != 0">
            <van-cell is-link @click="showPopup(num)">
              <div
                v-show="i == 0"
                v-for="(item, i) in t.subComments"
                :key="item.objectId"
                class="subComments"
              >
                查看<span>{{ item.userInfo.name }}</span
                >的回复 >
              </div>
            </van-cell>
            <van-popup
              v-model="isShow[num]"
              position="bottom"
              :style="{ height: '100%' }"
              closeable
              close-icon="close"
              close-icon-position="top-left"
            >
              <div class="more-comment">
                <div class="more-comment-title">
                  回复（{{ t.subComments.length}}）
                </div>
                <div class="more-comment-item">
                  <div class="more-comment-img">
                    <img
                      :src="
                        t.comment.userInfo.user_icon
                          ? t.comment.userInfo.user_icon
                          : 'https://thirdwx.qlogo.cn/mmopen/vi_32/qUZP3jnlVRbwicFW33M44CoP6FsOtK1zrdMokDlu8xzVv8fyyTY61K1icZKkPEc1PIicia82cRYoXWWmLJXUq64OHA/132'
                      "
                    />
                  </div>
                  <div class="more-comment-body">
                    <div class="comment-nav-title">
                      <div>
                        <p class="user-name">{{ t.comment.userInfo.name }}</p>
                        <p class="comment-time">{{ t.comment.createdAt }}</p>
                      </div>
                      <span><van-icon name="ellipsis" /></span>
                    </div>
                    <div class="comment-text">
                      <span class="comment-text-content">
                        {{ t.comment.content }}
                      </span>
                    </div>
                    <div class="comment-like">
                      <span class="reply">
                        <van-icon size="20" name="comment-o" />
                        <i class="like-num">评论</i>
                      </span>
                      <span class="like"
                        ><van-icon size="20" name="like-o" /><i
                          class="like-num"
                          >{{ t.comment.likes ? t.comment.likes.length : 0 }}</i
                        ></span
                      >
                    </div>
                  </div>
                </div>

                <div
                  class="comment-reply"
                  v-for="item in t.subComments"
                  :key="item.objectId"
                >
                  <div class="comment-reply-img">
                    <img
                      :src="
                        item.userInfo.user_icon
                          ? item.userInfo.user_icon
                          : 'https://thirdwx.qlogo.cn/mmopen/vi_32/qUZP3jnlVRbwicFW33M44CoP6FsOtK1zrdMokDlu8xzVv8fyyTY61K1icZKkPEc1PIicia82cRYoXWWmLJXUq64OHA/132'
                      "
                    />
                  </div>

                  <div class="comment-reply-body">
                    <div class="comment-reply-title">
                      <div>
                        <p class="comment-reply-name">
                          {{ item.userInfo.name }}
                        </p>
                        <p class="comment-reply-time">
                          {{ item.userInfo.createdAt }}
                        </p>
                      </div>
                      <span><van-icon name="ellipsis" /></span>
                    </div>

                    <div class="comment-reply-nav">
                      回复<span>@{{t.comment.userInfo.name}}:</span>{{ item.content }}
                      </div>
                    <div class="comment-like">
                      <span class="reply"
                        ><van-icon size="20" name="comment-o" /><i
                          class="like-num"
                          >评论</i
                        ></span
                      >
                      <span class="like"
                        ><van-icon size="20" name="like-o" /><i
                          class="like-num"
                          >{{ t.comment.likes ? t.comment.likes.length : 0 }}</i
                        ></span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </van-popup>
          </div>
        </div>
        <div class="comment-like">
          <span class="reply"
            ><van-icon size="20" name="comment-o" /><i class="like-num"
              >评论</i
            ></span
          >
          <span class="like"
            ><van-icon size="20" name="like-o" /><i class="like-num">{{
              t.comment.likes ? t.comment.likes.length : 0
            }}</i></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    commentArr: Array,
  },
  data() {
    return {
      show: false,
      isShow:[],
      count:0
    };
  },
  methods: {
    showPopup(num) {
      this.ShowData()
      this.isShow[num] = true
    },
    ShowData() {
      for (let i = 0; i < this.commentArr.length; i++) { 
         this.isShow = [...this.isShow,false]  
      }
    }
  },
};
</script>


<style lang="scss" scoped>
#comment {
  margin-bottom: 50px;
}

.no-comment {
  width: 100vw;
  height: 20vh;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 20vh;
  color: rgba(62, 173, 62, 0.731);
}

.comment {
  display: flex;
  margin-bottom: 2vh;
  width: 100vw;
  min-height: 24vh;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);

  .head-img {
    width: 17vw;
    height: 100%;

    img {
      display: block;
      margin: 10px auto;
      border-radius: 999px;
      width: 70%;
    }
  }

  .comment-nav-title {
    display: flex;
    margin-top: 10px;
    margin-right: 0;
    width: 83vw;
    height: 7vh;

    div {
      width: 80%;
      height: 100%;

      .user-name {
        height: 50%;
        font-weight: 700;
      }

      .comment-time {
        display: block;
        height: 50%;
        font-size: 12px;
      }
    }

    span {
      display: block;
      width: 20%;
      height: 100%;
      line-height: 7vh;
      font-size: 18px;
      text-align: center;
    }
  }

  .comment-text {
    width: 80vw;
    min-height: 12vh;

    .comment-text-content {
      width: 100%;
      min-height: 32px;
    }

    .subComments {
      border: 1px solid rgba(238, 238, 238, 0.6);
      margin-right: 10%;
      padding-left: 10px;
      width: 90%;
      height: 5vh;
      border-radius: 5px;
      line-height: 5vh;
      font-size: 14px;
      background-color: rgba(128, 128, 128, 0.1);
      color: gray;

      span {
        display: inline-block;
        margin: 0 10px;
        font-size: 14px;
        color: rgba(62, 173, 62, 0.731);
      }
    }
    .more-comment {
      width: 100vw;
      min-height: 100vh;

      .more-comment-title {
        border-bottom: 1px solid #eee;
        width: 100vw;
        height: 54px;
        line-height: 54px;
        text-align: center;
      }

      .more-comment-item {
        display: flex;
        margin-bottom: 2vh;
        width: 100vw;
        min-height: 24vh;
        border-bottom: 1px solid rgba(51, 51, 51, 0.1);

        .more-comment-img {
          width: 17vw;
          height: 100%;

          img {
            display: block;
            margin: 10px auto;
            border-radius: 999px;
            width: 70%;
          }
        }
      }

      .comment-reply {
        display: flex;
        margin-top: 20px;
        width: 100vw;
        min-height: 24vh;
        border-bottom: 1px solid #eee;

        .comment-reply-img {
          width: 17vw;
          height: 100%;

          img {
            display: block;
            margin: 10px auto;
            border-radius: 999px;
            width: 70%;
          }
        }

        .comment-reply-body {
          width: 100%;
          min-height: 24vh;

          .comment-reply-title {
            margin-top: 10px;
            width: 100%;
            display: flex;

            div {
              width: 80%;
            }

            .comment-reply-name {
              height: 50%;
              font-size: 16px;
              font-weight: 700;
            }

            .comment-reply-time {
              display: block;
              height: 50%;
              font-size: 12px;
            }

            span {
              display: block;
              width: 20%;
              height: 100%;
              line-height: 7vh;
              font-size: 18px;
              text-align: center;
            }
          }

          .comment-reply-nav {
            width: 80vw;
            min-height: 12vh;

            span {
              display: inline-block;
              margin: 0 10px;
              color: #3EAD3E;
            }
          }
        }
      }
    }
  }

  .comment-like {
    width: 100%;
    height: 4vh;

    span {
      float: right;
      margin-right: 20px;
      margin-bottom: 10px;

      .like-num {
        transform: scale(0.7);
        font-size: 10px;
      }
    }
  }

  .van-icon-arrow:before {
    display: none;
    color: transparent;
  }
}
</style>